<template>
	<view class="border">
		<view class="global">
			<!--————————————搜索—————————————— -->
			<view class="search" @tap="search">

				<image src="../static/fund/iocn-fangdajing.png" mode="" class="magnifier margin-left"></image>
				<input type="text" v-model="val" :class="[val ? 'text-blod' : '']" placeholder="基金代码/名称/经理/公司等关键词"
					class="margin-left" />
			</view>
			<!--————————————搜索—————————————— -->

			<!--————————————分类—————————————— -->
			<view class="catitems flex justify-between flex-wrap">
				<navigator :url="i.url" v-for="i in fundList" :key="i.imgSrc">
					<view class="icons align-center" @tap="hot(i.name)">
						<image :src="i.imgSrc" mode="" class="icon"></image>
						<text class="pt-16">{{ i.name }}</text>
					</view>
				</navigator>
			</view>

			<!--————————————分类—————————————— -->

			<!--————————————背景图—————————————— -->
			<view class="banner margin-top-lg">
				<image src="../static/fund/picture_jijin_mubiaodingtou@2x.png" mode=""></image>
				<view class="item">
					<view class="item-1"> 目标定投</view>
					<view class="item-2"> 无惧择时 积少成多 分散风险</view>
				</view>
			</view>
			<!--————————————背景图—————————————— -->

			<!--————————————按钮—————————————— -->
			<view class="flex justify-between margin-top-lg">
				<text class="text-bold text-lg">随大牛 稳增长</text>
				<text class="text-sm">一分钟了解基金</text>
			</view>
			<!--————————————标题—————————————— -->

			<!--————————————按钮—————————————— -->
			<view class="margin-top-xl btn flex justify-between">
				<block v-for="(i, index) in btn" :key="index">
					<button @tap="change(index)" class="cu-btn btn-item" :class="[
              curIndex == index ? 'bg-blue' : '',
              curIndex == index ? '' : 'btn-bg',
            ]">
						{{ i }}
					</button>
				</block>
			</view>
			<!--————————————按钮—————————————— -->

			<!--————————————按钮对应内容—————————————— -->
			<view class="list">
				<view class="l-title" v-if="curIndex == 0">
					<text class="text-blue text-bold">精选债基</text>
					<text class="margin-left">抵抗波动稳健增值，严控回撤，力争增强收益,近一年收益率超10%,大大提高效率</text>
				</view>
				<view class="l-title" v-else-if="curIndex == 1">
					<text class="text-blue text-bold">稳中进取</text>
					<text class="margin-left">安安稳稳当债主，稳健新选择</text>
				</view>
				<view class="l-title" v-else-if="curIndex == 2">
					<text class="text-blue text-bold">安稳增值</text>
					<text class="margin-left">债基打底，攻守兼备，股基双利</text>
				</view>


				<navigator :url="'../t-fundDetail/t-fundDetail?code='+l.code" v-for="l in fd.slice(x, y) ">
					<view class="l-type" :key="l.code">
						<view class="name">
							<text class="n-t">{{ l.name }}</text>
							<text class="cu-tag n-b round">{{ l.fundTag }}</text>
						</view>
						<view class="flex flex-wrap align-end l-footer">
							<text class="f1">{{ l.lastYearGrowth}}%</text>
							<text class="f2 text-center">{{ l.fundPoster }}</text>
							<text class="f3">{{ l.fundYear }}</text>
							<text class="f4 text-right">{{ l.fundSlogan }}</text>
						</view>
					</view>
				</navigator>

				<view class="text-bold text-center margin-top" v-if="!fd.slice(x, y).length">哎呀网络太差，数据加载出错</view>



			</view>
			<!--————————————按钮对应内容—————————————— -->

			<!--————————————底部内容—————————————— -->
			<view class="footer margin-top">
				基金销售服务由北京小雨点基金销售有限公司及各
				基金管理公司提供；历史业绩不代表未来表现，市场有风险，投资需谨慎。
			</view>
			<!--————————————底部内容—————————————— -->
		</view>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from 'vuex';
	const {
		mapActions,
		mapState
	} = createNamespacedHelpers('product')
	export default {

		data() {
			return {
				fundList: [{
						imgSrc: "../static/fund/icon_jingangqu_jijinpaihang@2x.png",
						name: "基金排行",
						url: "../t-fundtop/t-fundtop",
					},
					{
						imgSrc: "../static/fund/icon_jingangqu_renqirexiao@2x.png",
						name: "人气热销",
						url: "../t-fundHot/t-fundHot",
					},
					{
						imgSrc: "../static/fund/icon_jingangqu_jijinzuhe@2x.png",
						name: "基金组合",
						url: "../fund-group/fund-group",
					},
					{
						imgSrc: "../static/fund/icon_jingangqu_huobijijin@2x.png",
						name: "货币基金",
						url: "../monetaryFund/monetaryFund",
					},
					{
						imgSrc: "../static/fund/icon_jingangqu_zhishuxuanji@2x.png",
						name: "指数基金",
						url: "/pagesC/t-indexFund/t-indexFund",
					},
					{
						imgSrc: "../static/fund/icon_jingangqu_remenbankuai@2x.png",
						name: "热门板块",
						url: "",
					},
					{
						imgSrc: "../static/fund/icon_guipiao_etf@2x.png",
						name: "持仓",
						url: "/pagesC/t-holding/t-holding",
					},
				],

				val: "", //双向绑定
				btn: ["进阶优选", "稳健固收", "短期理财"], //btn按钮
				curIndex: 0, //第一个btn
				x: 0, //控制数组的截取的起始点
				y: 2, //控制数组的截取的结束点

			}

		},
		computed: {
			...mapState(['fd']), //所有基金数据

		},
		methods: {

			// 首页获取基金函数
			...mapActions(['getAllFund']),

			// 控制btn切换数据变化函数
			change(index) {
				this.curIndex = index;
				switch (this.curIndex) {
					case 0:
						this.x = 0;
						this.y = 2;
						break;
					case 1:
						this.x = 2;
						this.y = 4
						break;
					case 2:
						this.x = 4
						this.y = 6
						break;
						// default:
						break;
				}
			},

			// 热门板块提示内容
			hot(name) {
				if (name == '热门板块') {
					uni.showToast({
						title: '正在建设中，敬请期待',
						duration: 2000,
						icon: 'none'
					})
				}
			},

			// 搜索跳转
			search() {
				uni.navigateTo({
					url: "../../pagesD/search/search"
				})
			}
		},


		async onLoad() {
			await this.getAllFund() //请求数据
			console.log(this.fd.slice(this.x, this.y), 6666666666666666666)
		},

	};
</script>

<style scoped lang="scss">
	/* ————————————————全局样式———————————————— */

	.global {
		width: 670rpx;
		margin: 0 auto;
		/* 	background-color: white; */
	}

	.color-2d {
		color: #2d2d2d;
	}

	.color-f1 {
		color: #ff1d1d;
	}

	.color-9a {
		color: #9a9a9a;
	}

	.color-32 {
		color: #323232;
	}

	.pt-16 {
		padding-top: 16rpx;
	}

	/* ————————————————全局样式———————————————— */

	/* ————————————————搜索———————————————— */
	.search {
		height: 52rpx;
		background: #f8f7f7;
		opacity: 0.67;
		border-radius: 36px;
		/* border: 1px solid ; */
		display: flex;
		align-items: center;
		margin-top: 22rpx;
	}

	.magnifier {
		width: 40rpx;
		height: 40rpx;
	}

	input {
		width: 420rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 34rpx;
	}

	/* ————————————————搜索———————————————— */

	/* ————————————————分类———————————————— */
	.catitems::after {
		content: "";
		width: 150rpx;
	}

	.icons {
		height: 138rpx;
		width: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 	border: 1px solid red; */
		margin-top: 24rpx;
	}

	.icon {
		width: 88rpx;
		height: 88rpx;
	}

	/* ————————————————分类———————————————— */

	/* ————————————————背景图———————————————— */
	.banner {
		height: 150rpx;
		position: relative;

		image {
			// width: 100%;
			height: 100%;
		}

		.item {
			position: absolute;
			top: 0;
			left: 28rpx;

			.item-1 {
				font-size: 32rpx;
				color: #ffffff;
				padding-top: 18rpx;
			}

			.item-2 {
				font-size: 24rpx;
				color: #f0f0f0;
				padding-top: 18rpx;
			}
		}
	}

	/* ————————————————背景图———————————————— */

	/* ————————————————第一个按钮对应的内容———————————————— */
	.list {
		// margin-top: 24rpx;
		overflow: hidden;

		.l-title {
			margin-top: 24rpx;
		}

		.l-type {
			padding-top: 24rpx;

			.name {
				// border: 1rpx solid red;

				.n-t {
					font-size: 32rpx;
					color: #9a9a9a;
				}

				.n-b {
					background: #ffd9d9;
					font-size: 24rpx;
					color: #ff6537;
					margin-left: 30rpx;
				}
			}
		}

		.l-footer {
			padding-top: 10rpx;

			text {
				width: 40%;
				// border: 1rpx solid red;
			}

			.f1 {
				color: #ff1d1d;
				font-size: 52rpx;
			}

			.f2 {
				font-size: 32rpx;
				color: #2d2d2d;
				font-weight: 300;
			}

			.f3,
			.f4 {
				font-size: 24rpx;
				color: #9a9a9a;
			}
		}
	}

	/* ————————————————第一个按钮对应的内容———————————————— */

	/* ————————————————btn———————————————— */
	.btn::after {
		content: "";
		width: 30rpx;
	}

	.btn-item {
		color: white;
	}

	.btn-bg {
		background-color: #bbbbbb;
	}

	/* ————————————————btn———————————————— */

	.footer {
		// width: 440rpx;
		// height: 84rpx;
		font-size: 20rpx;
		font-weight: 300;
		line-height: 28rpx;
		color: #b1b1b1;
		opacity: 0.28;
		padding: 50rpx 155rpx;
	}
</style>
